<template>
	<view class="content">
		<view class="title">
			<view class="top-name box">
				<view class="left-name left">
					名称:
				</view>
				<view class="right-name right">
					{{viewData.name}}
				</view>
			</view>
			<view class="changguan-box box">
				<view class="changguan-left left">
					场馆：
				</view>
				<view class="changguan-right right">
					{{viewData.chang_guan}}
				</view>
			</view>
			<view class="changdi-box box">
				<view class="changdi-left left">
					场地：
				</view>
				<view class="changdi-right  right">
					{{viewData.chang_di}}
				</view>
			</view>
			<view class="renshu-box box">
				<view class="renshu-left left">
					人数：
				</view>
				<view class="renshu-right  right">
					{{viewData.duiyou_shuliang + '人'}}
				</view>
			</view>

			<view class="renshu-box box" v-if="viewData.start_time">
				<view class="renshu-left left">
					开始：
				</view>
				<view class="renshu-right  right">
					{{formatDate(viewData.start_time)}}
				</view>
			</view>
			<view class="renshu-box box" v-if="viewData.end_time">
				<view class="renshu-left left">
					结束：
				</view>
				<view class="renshu-right  right">
					{{formatDate(viewData.end_time)}}
				</view>
			</view>
			<view class="renshu-box-list">
				<view class="item-box" v-for="(item,i) in viewData.duiyou_shuliang" :key="i">
					<view class="left-imgbox">
						<image class="img" v-if="viewData.duiyuan_list[i] && viewData.duiyuan_list[i].tou_xiang!= ''"
							:src="base64Img(viewData.duiyuan_list[i].tou_xiang)">
							1
						</image>
						<image class="img" v-if="viewData.duiyuan_list[i] && viewData.duiyuan_list[i].tou_xiang== ''"
							src="../../../static/minilogo.png">
							2
						</image>



						<image class="img" v-if="!viewData.duiyuan_list[i]" src="@/static/nojiaruuser.png" mode="">
						</image>
					</view>
					<view class="span">

					</view>
					<view class="right-name">

						<view class="name" v-if="viewData.duiyuan_list[i]">
							{{viewData.duiyuan_list[i].name}}
						</view>
						<view class="name" v-if="!viewData.duiyuan_list[i]">
							等待加入
						</view>

						<view class="exit-btn" v-if="viewData.duiyuan_list[i]"
							@click="_exitUserTeam(viewData.duiyuan_list[i].duiyou_id)">
							<uni-icons type="minus" color="black" size="24"
								v-if="i != 0 && viewData.duizhang_open == openid"></uni-icons>
						</view>
						<view class="exit-btn" v-if="!viewData.duiyuan_list[i]">
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btn" @click="gotoMessage()">
			进入聊天
		</view>
		<view class="btn" @click="_joinDuiwu(1)">
			{{viewData.duizhang_open == openid ? '确认解散队伍':'确认退出队伍'}}
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'

	import {
		getZuDui,
		joinDuiwu,
		exitUserTeam,
		exitTeamUser
	} from '@/api/mine_api.js'
	import {
		ref
	} from 'vue';

	import {
		base64Img
	} from '@/tools/tools.js'

	const viewData = ref({})
	const openid = ref('')
	const id = ref('')

	const _getZuDui = (id) => {
		getZuDui(id).then((res) => {
			viewData.value = res
			console.log(res);
			uni.hideLoading();

		})
	}

	const _joinDuiwu = () => {
		uni.showModal({
			title: '警告',
			content: '您确认退出组队？',
			success(res2) {
				if (res2.confirm) {
					console.log('用户点击确定');
					uni.showLoading({
						title: '加载中'
					});

					exitUserTeam(id.value, openid.value).then((res) => {

						uni.showModal({
							title: '提示',
							content: '您已经退出了组队'
						})

						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							})
						}, 3000)
					})
				}

			},
			fail() {

			}
		})


	}

	const gotoMessage = () => {
		uni.navigateTo({
			url: `/pages/message_mode/message_content_view?id=${viewData.value.pipei_id}&telid=false&check=${0}`
		})
	}

	const _exitUserTeam = (duiyouid) => {
		let id = viewData.value.pipei_id
		console.log('踢出组队', duiyouid);
		uni.showModal({
			title: '警告',
			content: '是否将ta踢出队伍',
			success(res2) {
				if (res2.confirm) {
					exitTeamUser(id, duiyouid).then((res) => {
						console.log(res);
					})


					uni.showToast({
						title: '已经将其踢出',
						duration: 3000
					})
					_getZuDui(id)
				}
			}
		})

	}


	// 时间格式化
	const formatDate = (dateStr) => {
		// 直接将字符串转换为 Date 对象
		let date = new Date(dateStr.replace(' ', 'T'));

		// 获取小时和分钟
		let hours = date.getHours();
		let minutes = date.getMinutes();

		// 设置上午或下午
		let period = hours >= 12 ? '下午' : '上午';

		// 格式化分钟，确保是两位数
		let formattedMinutes = minutes < 10 ? '0' + minutes : minutes;

		// 获取月份和日期
		let month = date.getMonth() + 1; // 月份是从0开始的，所以需要加1
		let day = date.getDate();

		// 返回最终格式化的字符串
		return `${period} ${month}月${day}日 ${hours}:${formattedMinutes}`;
	}


	onLoad((res) => {
		uni.showLoading({
			title: '加载中'
		});
		id.value = res.id
		uni.getStorage({
			key: 'openid',
			success: function(res2) {
				console.log(res2);
				openid.value = res2.data.openid
			}
		})
		_getZuDui(res.id)
	})
</script>

<style scoped>
	@font-face {
		font-family: CustomFont;
		src: url('./iconfont.ttf');
	}
</style>

<style lang="scss" scoped>
	.content {
		background: linear-gradient(to bottom, rgba(135, 213, 255, 1) 0%, rgba(211, 211, 211, 0.58) 42%, rgba(211, 211, 211, 0) 100%);
		min-height: 100vh;
		padding: 20rpx;

		.title {
			padding-top: 20rpx;

			.box {
				margin-bottom: 40rpx;
				display: flex;
				padding: 20rpx;
				background-color: white;
				border-radius: 20rpx;

				.left {
					width: 120rpx;
				}

				.right {
					text-align: center;
					width: 100%;
				}
			}

			.renshu-box-list {
				display: block;
				display: flex;
				justify-self: center;
				flex-direction: column;
				padding: 20rpx 20rpx 0 20rpx;
				background-color: white;
				border-radius: 20rpx;
				width: calc(100vw - 80rpx);

				.item-box {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding-bottom: 20rpx;

					.img {
						width: 100rpx;
						height: 100rpx;
						border-radius: 20rpx;
					}

					.span {
						height: 100rpx;
						width: 1px;
						background-color: gainsboro;
					}

					.right-name {
						width: calc(100% - 160rpx);
						text-align: center;
						line-height: 100rpx;
						display: flex;
						justify-content: space-between;

					}
				}
			}
		}

		.btn {
			margin-top: 40rpx;
			padding: 40rpx;
			background-color: skyblue;
			border-radius: 20rpx;
			color: white;
			text-align: center;
		}
	}
</style>